import CodeView from '../../../shared/components/CodeView';
import CodeBlock from '../../../shared/components/CodeBlock';
import Example from '../../../shared/components/Example';
import Blockquote from '../../../shared/components/Blockquote';
import { Step as BaseStep, Progress as BaseProgress } from './base/example';
import { Step as VerticalStep, Progress as VerticalProgress } from './vertical/example';
import { Tooltip } from '../tooltips/base/example';
import { Modal, ModalHeader, ModalContent, ModalFooter, Backdrop } from '../modals/base/example';
import { MobileNotice, MobileBlurb } from '../../shared/doc-text';

<div className="doc lead">
  A progress indicator component communicates to the user the progress of a
  particular process.
</div>

<CodeView exampleOnly>
  <BaseProgress value="50">
    <BaseStep done>Step 1</BaseStep>
    <BaseStep done>Step 2</BaseStep>
    <BaseStep active>Step 3</BaseStep>
    <BaseStep>Step 4</BaseStep>
    <BaseStep>Step 5</BaseStep>
  </BaseProgress>
</CodeView>

## About Progress Indicator

### Implementation Requirements

The `slds-progress-bar` accepts a range from 0% to 100%, and this percentage should be applied with inline styling to the `div` with class `slds-progress-bar__value` using JavaScript. If implementing a horizontal progress indicator, set the width, otherwise set the height for vertical progress indicators.

### Accessibility

As the percentage of completion changes, be sure to update the `aria-valuenow` property on the `<div>` with `class="slds-progress-bar"`, as well as the `slds-assistive-text` `<span>`.

<CodeBlock toggleCode={false}>
  <div
    className="slds-progress-bar slds-progress-bar_x-small"
    aria-valuemin="0"
    aria-valuemax="100"
    aria-valuenow="50"
    role="progressbar"
  >
    <span className="slds-progress-bar__value" style={{ width: '50%' }}>
      <span className="slds-assistive-text">Progress: 50%</span>
    </span>
  </div>
</CodeBlock>

### Mobile

<MobileBlurb patternSpecificText="progress indicators will have increased actionable area sizes to accommodate tapping with a finger instead of the more precise mouse cursor" />

<CodeView frameOnly frameTitle="Example mobile styles for progress indicators">
  <BaseProgress value="50">
    <BaseStep done>Step 1</BaseStep>
    <BaseStep done>Step 2</BaseStep>
    <BaseStep active>Step 3</BaseStep>
    <BaseStep>Step 4</BaseStep>
    <BaseStep>Step 5</BaseStep>
  </BaseProgress>
</CodeView>

## Base

<Example title="Progress Indicator Base Horizontal">
  <CodeView>
    <BaseProgress value="0">
      <BaseStep active>Step 1</BaseStep>
      <BaseStep>Step 2</BaseStep>
      <BaseStep>Step 3</BaseStep>
      <BaseStep>Step 4</BaseStep>
      <BaseStep>Step 5</BaseStep>
    </BaseProgress>
  </CodeView>
</Example>

## Horizontal

### Active Step

When a step becomes active, the `<div>` with class `.slds-progress__item` should also get the class `.slds-is-active`.

<Blockquote type="a11y" header="Accessibility Requirements">
  <p>
    When a step is active, be sure to append "- Active" to the hidden text
    in the <code>&lt;span&gt;</code> with class <code>slds-assistive-text</code>, such as <code>Step 1 - Active</code>.
  </p>
</Blockquote>

<Example title="Progress Indicator Active Horizontal">
  <CodeView>
    <BaseProgress value="0">
      <BaseStep active>Step 1</BaseStep>
      <BaseStep>Step 2</BaseStep>
      <BaseStep>Step 3</BaseStep>
      <BaseStep>Step 4</BaseStep>
      <BaseStep>Step 5</BaseStep>
    </BaseProgress>
  </CodeView>
</Example>

### Completed Step

When the step is completed, the `.slds-is-active` class should be replaced with the class `.slds-is-completed` on `.slds-progress__item`. At that point, the `.slds-progress__item` element will receive a "success" icon, providing feedback that the step has been completed.

<Blockquote type="a11y" header="Accessibility Requirements">
  <p>
    When a step is completed, be sure to append "- Completed" to the hidden
    text in the <code>&lt;span&gt;</code> with class <code>slds-assistive-text</code>, such as <code>Step 2 - Completed</code>.
  </p>
</Blockquote>

<Example title="Progress Indicator Done Horizontal">
  <CodeView>
    <BaseProgress value="50">
      <BaseStep done>Step 1</BaseStep>
      <BaseStep done>Step 2</BaseStep>
      <BaseStep active>Step 3</BaseStep>
      <BaseStep>Step 4</BaseStep>
      <BaseStep>Step 5</BaseStep>
    </BaseProgress>
  </CodeView>
</Example>

### Error in a Step

When an error has occurred on a step, the `<div>` with class `.slds-progress__item` should also get the class `.slds-has-error`.

<Blockquote type="a11y" header="Accessibility Requirements">
  <p>
    When a step has an error, be sure to append "- Error" to the hidden
    text in the <code>&lt;span&gt;</code> with class <code>slds-assistive-text</code>, such as <code>Step 3 - Error</code>.
  </p>
</Blockquote>

<Example title="Progress Indicator Done Horizontal">
  <CodeView>
    <BaseProgress value="50">
      <BaseStep done>Step 1</BaseStep>
      <BaseStep done>Step 2</BaseStep>
      <BaseStep error>Step 3</BaseStep>
      <BaseStep>Step 4</BaseStep>
      <BaseStep>Step 5</BaseStep>
    </BaseProgress>
  </CodeView>
</Example>

### Step Title Tooltip

<Blockquote type="a11y" header="Accessibility Requirements">
  <p>
    The name of the step should be included with the <code>slds-assistive-text</code> class
    as the inner text of the step's <code>div</code> so that it is available to screen readers.
  </p>
</Blockquote>

<Example title="Progress Indicator Tooltip Horizontal">
  <CodeView>
    <div style={{ padding: '3.5rem 1rem 0' }}>
      <BaseProgress value="50">
        <BaseStep done>Step 1</BaseStep>
        <BaseStep done>Step 2</BaseStep>
        <BaseStep active aria-describedby="step-3-tooltip">
          Step 3
        </BaseStep>
        <BaseStep>Step 4</BaseStep>
        <BaseStep>Step 5</BaseStep>
      </BaseProgress>
      <Tooltip
        className="slds-nubbin_bottom"
        id="step-3-tooltip"
        style={{
          position: 'absolute',
          top: '1rem',
          left: 'calc(50% + 6px)',
          transform: 'translateX(-50%)'
        }}
      >
        Verify Email
      </Tooltip>
    </div>
  </CodeView>
</Example>

### In a Modal

<Example title="Progress Indicator Horizontal in Modal">
  <CodeView isViewport demoStyles="height: 640px;">
    <div>
      <Backdrop>
        <Modal className="slds-modal_large" aria-labelledby="header43">
          <ModalHeader>
            <h1 id="header43" className="slds-text-heading_medium">
              Modal header
            </h1>
          </ModalHeader>
          <ModalContent className="slds-grow slds-p-around_medium" />
          <ModalFooter className="slds-grid slds-grid_align-spread">
            <button className="slds-button slds-button_neutral" aria-label="Cancel and close">Cancel</button>
            <BaseProgress className="slds-progress_shade" value="25">
              <BaseStep done>Step 1</BaseStep>
              <BaseStep active>Step 2</BaseStep>
              <BaseStep>Step 3</BaseStep>
              <BaseStep>Step 4</BaseStep>
              <BaseStep>Step 5</BaseStep>
            </BaseProgress>
            <button className="slds-button slds-button_brand">Save</button>
          </ModalFooter>
        </Modal>
      </Backdrop>
    </div>
  </CodeView>
</Example>

### On a Gray Background

<Example title="Progress Indicator Horizontal Gray Background">
  <CodeView demoStyles="background-color: #F3F2F2; padding: 1rem;">
    <BaseProgress className="slds-progress_shade" value="25">
      <BaseStep done>Step 1</BaseStep>
      <BaseStep active>Step 2</BaseStep>
      <BaseStep>Step 3</BaseStep>
      <BaseStep>Step 4</BaseStep>
      <BaseStep>Step 5</BaseStep>
    </BaseProgress>
  </CodeView>
</Example>

## Vertical

To display a vertical progress indicator, the `<div>` with class `.slds-progress` should also get the class `.slds-progress_vertical`. The vertical progress indicator will take up 100% of the height of its container. The step titles in the vertical variant appear next to the step, instead of in a tooltip.

<Blockquote type="note" header="Implementation Note">
  <p>
    The key markup difference between the horizontal and vertical variants is the
    progress markers. Horizontal progress indicators use <code>&lt;button&gt;</code> for each
    step, whereas Vertical progress indicator steps are not interactive and
    therefore simply use <code>&lt;div&gt;</code>.
  </p>
</Blockquote>

<Example title="Progress Indicator Vertical">
  <CodeView>
    <VerticalProgress value="25">
      <VerticalStep done>Step 1</VerticalStep>
      <VerticalStep active>Step 2</VerticalStep>
      <VerticalStep>Step 3</VerticalStep>
      <VerticalStep>Step 4</VerticalStep>
      <VerticalStep>Step 5</VerticalStep>
    </VerticalProgress>
  </CodeView>
</Example>

### Green Success

To create a green completed step, the `.slds-progress__item` element should also receive the `.slds-is-completed` class. In addition, the `<span>` with class `.slds-progress__marker_icon` should also get the class `slds-progress__marker_icon-success`.

<Example title="Progress Indicator Vertical Success">
  <CodeView>
    <VerticalProgress value="25">
      <VerticalStep done hasSuccessMarker>
        Step 1
      </VerticalStep>
      <VerticalStep active>Step 2</VerticalStep>
      <VerticalStep>Step 3</VerticalStep>
      <VerticalStep>Step 4</VerticalStep>
      <VerticalStep>Step 5</VerticalStep>
    </VerticalProgress>
  </CodeView>
</Example>

### Error in a Step

When an error has occurred on a step, the `<div>` with class `.slds-progress__item` should also get the class `.slds-has-error`.

<Example title="Progress Indicator Vertical Success">
  <CodeView>
    <VerticalProgress value="25">
      <VerticalStep done>Step 1</VerticalStep>
      <VerticalStep error>Step 2</VerticalStep>
      <VerticalStep>Step 3</VerticalStep>
      <VerticalStep>Step 4</VerticalStep>
      <VerticalStep>Step 5</VerticalStep>
    </VerticalProgress>
  </CodeView>
</Example>

### Multiline Step Titles

The vertical progress indicator also supports multiline step descriptions.

<Example title="Progress Indicator Vertical">
  <CodeView>
    <VerticalProgress value="25">
      <VerticalStep done>Step 1</VerticalStep>
      <VerticalStep active>Step 2</VerticalStep>
      <VerticalStep>
        Step 3: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  Praesent eget pellentesque lacus. Suspendisse euismod magna nec nulla ornare viverra. Sed pretium, eros ullamcorper scelerisque placerat, nunc velit volutpat libero, a semper lacus urna eget nibh. Maecenas eget tortor pulvinar, scelerisque nibh sed, fringilla erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut ultricies dui turpis, at posuere dolor convallis vitae.
      </VerticalStep>
      <VerticalStep>Step 4</VerticalStep>
      <VerticalStep>Step 5</VerticalStep>
    </VerticalProgress>
  </CodeView>
</Example>
